<template>
  <div class="app-container">
    <!-- 卡片1 -->
    <el-card class="box-card">
      <div class="top-box">
        <!-- 左侧 -->
        <el-tag size="medium">
          <!-- 图标 -->
          <i class="el-icon-info"></i>
          <!-- 文本 -->
          <span style="margin-left: 7px">共 {{ total }} 条记录</span>
        </el-tag>
        <!-- 右侧 -->
        <div>
          <el-button type="success" size="mini" @click="$router.push('/employees/import')">excel导入</el-button>
          <el-button type="danger" size="mini" @click="exportExcel">excel导出</el-button>
          <el-button type="primary" size="mini" :disabled="isPointDisabled('POINT-USER-ADD')" @click="isShowAdd = true">新增员工</el-button>
        </div>
      </div>
    </el-card>

    <!-- 卡片2 -->
    <el-card class="box-card box-card-2">
      <!-- 员工的表格数据 -->
      <el-table :data="empList" border stripe>
        <el-table-column label="序号" type="index" min-width="80px"></el-table-column>
        <el-table-column label="姓名" prop="username" min-width="100px"></el-table-column>
        <el-table-column label="手机号" prop="mobile" min-width="100px"></el-table-column>
        <el-table-column label="工号" prop="workNumber" min-width="80px"></el-table-column>
        <el-table-column label="聘用形式" min-width="100px">
          <template v-slot="{ row }">{{ row.formOfEmployment | hireType }}</template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" min-width="100px"></el-table-column>
        <el-table-column label="入职时间" min-width="120px">
          <template v-slot="{ row }">{{ row.timeOfEntry | dateFormat }}</template>
        </el-table-column>
        <el-table-column label="转正时间" min-width="120px">
          <template v-slot="{ row }">{{ row.correctionTime | dateFormat }}</template>
        </el-table-column>
        <el-table-column label="操作" width="280px" fixed="right">
          <template v-slot="{ row }">
            <div class="center-item">
              <el-link type="primary" @click="$router.push('/employees/empdetail/' + row.id)">查看</el-link>
              <el-link type="primary">转正</el-link>
              <el-link type="primary">调岗</el-link>
              <el-link type="primary">离职</el-link>
              <el-link type="primary" @click="showAssignRole(row.id)">角色</el-link>
              <el-link type="primary" :disabled="isPointDisabled('point-user-delete')" @click="remove(row.id)">删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination :current-page.sync="q.page" :page-size="q.size" layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange"> </el-pagination>
    </el-card>

    <!-- 添加员工的子组件 -->
    <AddEmp :show-dialog.sync="isShowAdd" @reload="initEmpList" />
    <!-- 为员工分配角色的对话框 -->
    <AssignRole :id.sync="id" :show-dialog.sync="isShowRole" />
  </div>
</template>

<script>
// 按需导入接口
import { getEmpListAPI, delEmpAPI } from '@/api/emp.js'
// 导入子组件
import AddEmp from './components/AddEmp.vue'
// 按需导入需要的方法
import { export_json_to_excel } from '@/utils/vendor/Export2Excel.js'
// 导入分配角色的对话框
import AssignRole from './components/AssignRole.vue'

export default {
  name: 'Employees',
  // 注册子组件
  components: {
    AddEmp,
    AssignRole
  },
  data() {
    return {
      // 查询的参数对象
      q: {
        page: 1,
        size: 10
      },
      // 总数据条数（初始值要给一个数字 0）
      total: 0,
      // 用户的列表数据
      empList: [],
      // 控制添加对话框的显示和隐藏
      isShowAdd: false,
      // 控制分配角色对话框的显示和隐藏
      isShowRole: false,
      // 员工的 id
      id: ''
    }
  },
  created() {
    this.initEmpList()
  },
  methods: {
    // 请求员工的列表数据
    async initEmpList() {
      const result = await getEmpListAPI(this.q)
      this.total = result.data.total
      this.empList = result.data.rows
    },
    // 监听页码值的改变
    handleCurrentChange(newPage) {
      this.q.page = newPage
      this.initEmpList()
    },
    // 删除员工
    async remove(id) {
      // 1. 询问是否要删除
      // 2. 调用删除接口
      // 3. 删除后的操作
      const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)

      if (result !== 'confirm') return

      await delEmpAPI(id)

      this.$message.success('删除成功！')
      // 处理页码值的回退操作
      if (this.empList.length === 1 && this.q.page > 1) {
        this.q.page--
      }
      this.initEmpList()
    },
    // 点击按钮，把所有员工数据，导出为 excel
    async exportExcel() {
      // 请求所有员工的数据
      const result = await getEmpListAPI({ page: 1, size: 1000 })

      const kyes = ['username', 'mobile', 'workNumber', 'formOfEmployment', 'departmentName', 'timeOfEntry', 'correctionTime']

      // 第1次 map 是循环每个用户
      const excelData = result.data.rows.map((item) => {
        // 第2次 map 是循环得到每个用户的数据
        return kyes.map((k) => {
          // 处理入职时间和转正时间
          if (k === 'timeOfEntry' || k === 'correctionTime') {
            // return item[k] ? dayjs(item[k]).format('YYYY-MM-DD') : ''
            return this.$options.filters.dateFormat(item[k])
          }
          // 处理聘用形式
          if (k === 'formOfEmployment') {
            return this.$options.filters.hireType(item[k])
          }
          return item[k]
        })
      })

      // 表头的列
      const header = ['姓名', '手机号', '工号', '聘用形式', '部门', '入职时间', '转正时间']

      export_json_to_excel({
        // 配置单元格如何进行合并
        merges: ['A1:A2', 'B1:E1', 'F1:G1'],
        // 多级表头
        multiHeader: [['姓名', '基本信息', '', '', '', '入职/转正时间', '']],
        // 文件的名字
        filename: '员工列表',
        // 表头
        header,
        // 表示要导出的数据
        data: excelData
      })
    },
    // 展示分配角色的对话框
    // 形参中的 id 是员工的 id
    showAssignRole(id) {
      this.id = id
      this.isShowRole = true
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card-2 {
  margin-top: 15px;
}

.top-box {
  display: flex;
  justify-content: space-between;
}
</style>
